import { PayloadAction, createSlice } from "@reduxjs/toolkit";
import { componentPropsType } from "../questioncomponents";
import { produce } from 'immer'
import { message } from "antd";
import _ from 'lodash'
import { getNextSelectedId,addNewComponent } from "../utils";
import { nanoid } from "nanoid";
import {arrayMove} from "@dnd-kit/sortable"
export type QuestionInfoType = {
    title:string,
    fe_id: string,
    type: string,
    hide: boolean,
    lock: boolean,
    props: componentPropsType | null
}

export type ComponentSlice_StateType = {
    selectedId: string,
    componentList: QuestionInfoType[],
    copyComponent: QuestionInfoType | null
}

export const ComponentSlice_InitialValue: ComponentSlice_StateType = {
    selectedId: '',
    componentList: [],
    copyComponent: null
}

const ComponentSlice = createSlice({
    name: 'ComponentSlice',
    initialState: ComponentSlice_InitialValue,
    reducers: {
        resetComponents(state: ComponentSlice_StateType, action: PayloadAction<ComponentSlice_StateType>) {
            return action.payload
        },
        setSelectedId: produce((draft: ComponentSlice_StateType, action: PayloadAction<string>) => {
            draft.selectedId = action.payload
        }),
        //添加新的组件
        addComponent: produce((draft: ComponentSlice_StateType, action: PayloadAction<QuestionInfoType>) => {
            addNewComponent(draft,action.payload)
        }),
        //修改新的组件的值
        changeComponent: produce((draft: ComponentSlice_StateType, action: PayloadAction<{ fe_id: string, newProps: componentPropsType }>) => {
            const { fe_id, newProps } = action.payload
            const selectComponent = draft.componentList.find((c) => {
                return c.fe_id === fe_id
            })
            selectComponent!.props = newProps
        }),
        //删除选中的组件
        deleteComponent: produce((draft: ComponentSlice_StateType, ) => {
            const { selectedId,componentList } = draft
            const index = componentList.findIndex((c) => c.fe_id === selectedId)
            draft.selectedId = getNextSelectedId(selectedId, componentList) || ''
            componentList.splice(index, 1)
            // message.success('删除成功',0.5)
        }),
        //隐藏组件
        toggleHideComponent: produce((draft: ComponentSlice_StateType, action: PayloadAction<{ fe_id: string, ishide: boolean }>) => {
            const { componentList } = draft
            const { fe_id, ishide } = action.payload
            draft.selectedId = getNextSelectedId(fe_id, componentList) || ''
            const selectComponent = componentList.find((c) => c.fe_id === fe_id)
            selectComponent!.hide = ishide
        }),
        //锁定解锁组件
        toggleLockComponent: produce((draft: ComponentSlice_StateType, action: PayloadAction<{ fe_id: string, islock: boolean }>) => {
            const { componentList } = draft
            const { fe_id, islock } = action.payload
            // draft.selectedId = getNextSelectedId(fe_id,componentList) || ''
            const selectComponent = componentList.find((c) => c.fe_id === fe_id)
            selectComponent!.lock = islock
        }),
        //复制组件
        copyOneComponent: produce((draft: ComponentSlice_StateType) => {
            const { selectedId, componentList } = draft
            const selectComponent = componentList.find((c) => c.fe_id === selectedId)
            if (!selectComponent) return
            draft.copyComponent = _.cloneDeep(selectComponent);
            message.success('复制成功', 0.5)
        }),
        //粘贴组件
        pasteComponent: produce((draft: ComponentSlice_StateType) => {
            const { copyComponent = null } = draft
            if(!copyComponent) return
            copyComponent.fe_id = nanoid()
            addNewComponent(draft,copyComponent)
        }),
        //修改组件标题
        changeTitleComponent:produce((draft:ComponentSlice_StateType,action:PayloadAction<{id:string;value:string}>)=>{
            const { componentList } = draft
            const selectComponent = componentList.find((c) => c.fe_id === action.payload.id)
            if (!selectComponent) return
            selectComponent.title = action.payload.value
        }),
        //选中上一个
        selectPreComponent:produce((draft:ComponentSlice_StateType)=>{
            const { selectedId, componentList } = draft
            const index = componentList.findIndex((c)=>c.fe_id === selectedId)
            if(index < 0) return
            if(index === 0) return
            draft.selectedId = componentList[index - 1].fe_id
        }),
        //选中下一个
        selectNextComponent:produce((draft:ComponentSlice_StateType)=>{
            const { selectedId, componentList } = draft
            const index = componentList.findIndex((c)=>c.fe_id === selectedId)
            if(index < 0) return
            if(index+1 === componentList.length) return
            draft.selectedId = componentList[index + 1].fe_id
        }),
        moveComponent: produce((draft: ComponentSlice_StateType, action: PayloadAction<{ oldIndex: number; newIndex: number }>) => {
            const { componentList } = draft;
            const { oldIndex, newIndex } = action.payload;
            draft.componentList = arrayMove(componentList, oldIndex, newIndex);
        }),
        //上移组件
        upComponent:produce((draft:ComponentSlice_StateType)=>{
            const { selectedId, componentList } = draft
            const index = componentList.findIndex((c)=>c.fe_id === selectedId)
            if(index < 0) return
            if(index === 0) return
            const newIndex = index - 1
            draft.componentList = arrayMove(componentList, index, newIndex);
        }),
        downComponent:produce((draft:ComponentSlice_StateType)=>{
            const { selectedId, componentList } = draft
            const index = componentList.findIndex((c)=>c.fe_id === selectedId)
            if(index < 0) return
            if(index+1 === componentList.length) return
            const newIndex = index + 1
            draft.componentList = arrayMove(componentList, index, newIndex);
        })
    }
})

export const {downComponent,upComponent,moveComponent, resetComponents, setSelectedId, addComponent, changeComponent, deleteComponent, toggleHideComponent, toggleLockComponent, copyOneComponent, pasteComponent,selectPreComponent,selectNextComponent,changeTitleComponent } = ComponentSlice.actions

export default ComponentSlice.reducer